<template>
  <div class="app-container">
    <div v-show="!detailInfo.visible">
      <!-- 条件栏 -->
      <div class="filter-wrapper">
        <new-page-filter
          v-model:query="filterInfo.query"
          :filter-list="filterInfo.searchList"
          :filter-btn="filterInfo.searchBtn"
        >
          <template v-slot:filter-pullTime>
            <el-date-picker
              @change="timeChange"
              v-model="pullTime"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              type="datetimerange"
              range-separator="至"
              align="right"
              :shortcuts="$fn.pickerOptionsFn()"
              :default-time="[
                new Date(2000, 1, 1, 0, 0, 0),
                new Date(2000, 1, 1, 23, 59, 59),
              ]"
              start-placeholder="拉取时间开始日期"
              end-placeholder="拉取时间结束日期"
            ></el-date-picker>
          </template>
        </new-page-filter>
      </div>
      <div class="filter-wrapper">
        <new-page-filter :filter-btn="filterInfo.btnList"> </new-page-filter>
      </div>
      <!-- 表格 -->
      <TableContainer
        :refresh="tableInfo.refresh"
        :init-curpage="tableInfo.initCurpage"
        v-model:data="tableInfo.data"
        :api="tableInfo.api"
        :query="filterInfo.query"
        :field-list="tableInfo.fieldList"
        :checkBox="false"
        :handle="tableInfo.handle"
        @pageInfo="pageInfo"
      >
        <template v-slot:col-price="scope">
          <span v-if="scope.row.price">
            {{ scope.row.price + '元/' + scope.row.networkUnit }}
          </span>
          <span v-else>-</span>
        </template>
        <template v-slot:col-networkUnitScale="scope">
          {{
            scope.row.systemUnitCoefficient +
            scope.row.unitName +
            '=' +
            scope.row.networkUnitCoefficient +
            scope.row.networkUnit
          }}
        </template>
        <template v-slot:col-distributeCount="scope">
          {{ scope.row.distributeCount + scope.row.networkUnit }}
        </template>
        <template v-slot:col-warehouseCount="scope">
          {{ scope.row.warehouseCount + scope.row.networkUnit }}
        </template>
        <template v-slot:col-qty="scope">
          {{ scope.row.qty + scope.row.networkUnit }}
        </template>
      </TableContainer>
    </div>
    <PageDialog
      v-show="dialogInfo.visible"
      :title="dialogInfo.title"
      v-model:visible="dialogInfo.visible"
      :width="dialogInfo.width"
      :bt-loading="dialogInfo.btLoading"
      :bt-list="dialogInfo.btList"
    >
      <div class="asset-msg">
        <div class="asset-msg-label">
          <i class="el-icon-warning"></i>{{ dialogInfo.msg }}：
        </div>
        <el-radio-group v-model="dialogInfo.flag">
          <el-radio :label="true">当前页数据</el-radio>
          <el-radio :label="false">全部页数据</el-radio>
        </el-radio-group>
      </div>
    </PageDialog>
    <detail
      v-if="detailInfo.visible"
      v-model:visible="detailInfo.visible"
      :id="detailInfo.id"
      @returnBack="getList"
    />
  </div>
</template>
<script setup name="productSupplier">
import detail from './detail'
import {
  getProvinceProductLastSupplierInfoPage,
  pullDataProvinceProductSupplierInfo,
  excelProvinceProductSupplierInfo,
} from '@/api/province'

const { proxy } = getCurrentInstance()
const pullTime = ref([])
const filterInfo = ref({
  query: {
    sortString: '',
  },
  searchList: [
    {
      componentType: 'input',
      label: '商品代码',
      value: 'procurecatalogIdLike',
      event: search,
    },
    {
      componentType: 'input',
      label: '通用名称',
      value: 'productNameLike',
      event: search,
    },
    {
      componentType: 'input',
      label: '产品ID',
      value: 'goodsIdLike',
      event: search,
    },
    {
      componentType: 'input',
      label: '配送企业名称',
      value: 'companyNamePsLike',
      event: search,
    },
    {
      label: '挂网产品类型',
      value: 'networkProductTypeMutl',
      event: search,
      componentType: 'select-model',
      code: 'network_product_type',
      show: true,
      hidden: true,
      multiple: true
    },
    {
      componentType: 'input',
      label: '申报企业',
      value: 'companyNameTbLike',
      event: search,
    },
    {
      label: '拉取时间',
      slot: true,
      value: 'pullTime',
      event: search,
    },
  ],
  btnList: [
    {
      type: 'button',
      label: '更新数据',
      event: update,
      show: proxy.$permission('productSupplier:updateData'),
    },
    {
      type: 'button',
      label: '导出excel',
      event: exportExcel,
      show: proxy.$permission('productSupplier:excel'),
    },
  ],
  searchBtn: [{ type: 'button', label: '搜索', event: search }],
})
// 表格相关
const tableInfo = ref({
  refresh: 1,
  initCurpage: 1,
  api: getProvinceProductLastSupplierInfoPage,
  data: [],
  selections: [],
  fieldList: [
    {
      label: '通用名称',
      value: 'productName',
    },
    {
      label: '挂网产品类型',
      value: 'networkProductTypeValue',
    },
    {
      label: '商品代码',
      value: 'procurecatalogId',
    },
    {
      label: '产品ID',
      value: 'goodsId',
    },
    {
      label: '规格',
      value: 'outLookc',
    },
    {
      label: '型号',
      value: 'model',
    },
    {
      label: '品牌',
      value: 'brand',
    },
    {
      label: '包装规格',
      value: 'packOutlookc',
    },
    {
      label: '采购价格',
      value: 'price',
      type: 'slot',
    },
    {
      label: '省采单位',
      value: 'networkUnit',
    },
    {
      label: '申报企业',
      value: 'companyNameTb',
    },
    {
      label: '配送企业名称',
      value: 'companyNamePs',
    },
    {
      label: '最后修改日期',
      value: 'lastUpdateTime',
    },
    {
      label: '拉取时间',
      value: 'pullTime',
    },
  ],
  handle: {
    fixed: 'right',
    label: '操作',
    width: '100',
    btList: [
      {
        label: '详情',
        event: showDetail,
        show: proxy.$permission('productSupplier:detail'),
      },
    ],
  },
})
const detailInfo = ref({
  visible: false,
  id: '',
})
const dialogInfo = ref({
  visible: false,
  title: '提示',
  btLoading: false,
  type: '',
  msg: '',
  width: '400px',
  flag: true,
  btList: [
    { label: '关闭', event: handleClose, show: true },
    {
      label: '打印',
      type: 'primary',
      event: checkConfirm,
      show: true,
    },
  ],
})
const page = ref({
  page: true,
  curPage: 1, // 当前页
  pageSize: 20, // 每页条数
})
getList()
function timeChange(val) {
  if (val && val.length) {
    filterInfo.value.query.pullTimeGreater = val[0]
    filterInfo.value.query.pullTimeLess = val[1]
  } else {
    filterInfo.value.query.pullTimeGreater = ''
    filterInfo.value.query.pullTimeLess = ''
  }
}
function showDetail(row) {
  detailInfo.value.visible = true
  detailInfo.value.id = row.id
}
function update() {
  //更新数据
  pullDataProvinceProductSupplierInfo().then((res) => {
    if (res && res.success) {
      getList()
    }
  })
}

// 获取列表
function getList() {
  tableInfo.value.refresh = Math.random()
}
// 搜索
function search() {
  // 重置分页
  tableInfo.value.initCurpage = Math.random()
  tableInfo.value.refresh = Math.random()
}
function exportExcel() {
  dialogInfo.value.visible = true
  dialogInfo.value.type = 'excel'
  dialogInfo.value.msg = '请选择数据导出范围'
  dialogInfo.value.btList[1].label = '导出'
  dialogInfo.value.flag = true
}
function exportExcelList() {
  let params = {
    ...filterInfo.value.query,
    ...page.value,
    page: dialogInfo.value.flag,
  }
  excelProvinceProductSupplierInfo(params).then((resp) => {
    if (resp) {
      proxy.$fn.parseExcel(resp)
    }
  })
}
function checkConfirm() {
  if (dialogInfo.value.type === 'excel') {
    exportExcelList()
  }
  dialogInfo.value.visible = false
  dialogInfo.value.msg = ''
}
function handleClose() {
  dialogInfo.value.visible = false
}
function pageInfo(obj) {
  page.value = obj
}
</script>

<style scoped lang="scss"></style>
